<template>
  <div>
    <van-cell-group>

      <van-cell
        v-for="item in list"
        :key="item.id"
        :title="item.vaccineName+'预约信息码'+item.id"
        :label="item.vaccinatorName+'-'+item.hospitalName+'-'+item.adate"
      >
        <template #right-icon>
          <div v-if="item.isState===2">
            <van-button size="mini" type="primary" @click="complete(item.id)">接种完成</van-button>
          </div>
          <div v-if="item.isState===1">
            <van-button size="mini" type="danger" @click="cancel(item.id)">取消预约</van-button>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

  </div>
</template>

<script>
import appointment from '@/api/appointment'
import Cookies from 'js-cookie'

export default {
  name: 'ReservationInfo',
  data() {
    return {
      list: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      appointment.List(Cookies.get('Sysid'))
        .then(response => {
          this.list = response.data.rows
        })
    },
    cancel(id) {
      appointment.cancel(id).then((response) => {
        this.fetchData()
        this.$message.success(response.message)
      })
    },
    complete(id) {
      appointment.complete(id).then((response) => {
        this.fetchData()
        this.$message.success(response.message)
      })
    }
  }
}
</script>

<style scoped>

</style>
